<template>
  <view>
    <!-- 头部导航栏 -->
    <view class="top-navigate" style="padding: 53px 10px 10px 10px;" @click="goBack">
      <view class="content cuIcon-back text-xl top-navigate-title"></view>
      <view class="text-xl top-navigate-title">新建地址</view>
    </view>
    <!-- 填写地址信息区域 -->
    <view class="edit-info-box">
      <!-- 收货地址 -->
      <view class="cu-form-group">
        <view class="margin-right-xs">地址:</view>
        <input v-model="newAddressInfo.address_name"></input>
        <button class="text-gray text-sm  btn-needs-address" @click="searchAddressInfo">请选择地址<view class="cuIcon-right">
          </view>
        </button>
      </view>
      <!-- 门牌号 -->
      <view class="cu-form-group">
        <view class="margin-right-xs ">门牌号:</view>
        <input placeholder="单元,楼层,门牌号等如2单元A601" name="input" v-model="newAddressInfo.address_detail"></input>
      </view>
      <!-- 联系人 -->
      <view class="cu-form-group">
        <view class="margin-right-xs">联系人:</view>
        <input placeholder="联系人姓名" name="input" v-model="newAddressInfo.user_name"></input>
      </view>
      <!-- 电话 -->
      <view class="cu-form-group">
        <view class="margin-right-xs">电话:</view>
        <input placeholder="请输入正确的手机号" name="input" v-model="newAddressInfo.user_phone"></input>
        <view class="cu-capsule radius">
          <view class='cu-tag bg-blue '>+86</view>
          <view class="cu-tag line-blue">中国大陆</view>
        </view>
      </view>
      <button class="cu-btn round bg-orange shadow lg flex" style="margin: 15px auto;width: 90%;"
        @click="addAddressInfoList" v-if="JSON.stringify(addressMsg) == '{}'">保存并使用</button>
      <button class="cu-btn round bg-orange shadow lg flex" style="margin: 15px auto;width: 90%;"
        @click="editAddressInfoList" v-else>编辑</button>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    name: "add-address-info",
    data() {
      return {
        newAddressInfo: {}
      };
    },
    props: ['addressMsg'],
    computed: {
      ...mapState('m_user', ['userinfo']),
    },
    methods: {
      ...mapMutations('m_user', ['updateAddressList']),
      //选择地址事件
      searchAddressInfo() {
        uni.chooseLocation({
          success: (res) => {
            console.log(res);
            this.newAddressInfo = {
              address_name: res.name,
              address_detail: res.address,
              user_name: this.addressMsg.user_name,
              user_phone: this.addressMsg.user_phone,
              address_latitude: res.latitude,
              address_longitude: res.longitude
            }

            console.log(this.newAddressInfo);
            console.log('位置名称：' + res.name);
            console.log('详细地址：' + res.address);
            console.log('纬度：' + res.latitude);
            console.log('经度：' + res.longitude);
          },
          fail: (err) => {
            uni.showToast({
              title: '获取位置失败'
            });
          }
        });
      },
      //新增用户地址信息按钮
      async addAddressInfoList() {
        this.newAddressInfo.user_id = this.userinfo._id
        console.log(this.newAddressInfo);
        const db = uniCloud.database();
        const {
          result: res
        } = await db.collection("my_address").add(this.newAddressInfo);
        if (res.id) {
          this.goBack()
          uni.$showMsg('新增地址成功！')
          this.$parent.getAddressList()
        } else {
          uni.$showMsg('新增地址失败！')
        }
        console.log(res);

      },
      //编辑用户地址信息
      async editAddressInfoList() {
        const deletIdObj = {
          ...this.newAddressInfo
        };
        if (delete deletIdObj._id) {
          const db = uniCloud.database();
          const {
            result: res
          } = await db.collection("my_address").where({
            _id: this.addressMsg._id
          }).update(deletIdObj);
          console.log(res);
          if (res.updated == 1) {
            uni.$showMsg('编辑地址信息成功！')
            this.goBack()
            this.$parent.getAddressList()
          } else {
            uni.$showMsg('编辑地址信息失败！')
          }
        } else {
          uni.$showMsg('数据异常！')
        }
      },
      goBack() {
        this.newAddressInfo = {}
        this.$parent.addAddressInfoShow = false
      }
    },
    mounted() {
      this.newAddressInfo = this.addressMsg
    }
  }
</script>

<style lang="scss">
  .top-navigate {
    display: flex;
    justify-content: left;
    align-items: center;

    .top-navigate-title {
      margin: 0 5px;
      font-weight: bold;
    }
  }

  .edit-info-box {
    padding: 5px;
    background-color: white;
    width: 95%;
    border-radius: 10px;
    margin: 0 auto;

    .btn-needs-address {
      display: flex;
      align-items: center;
      margin: 0;
    }
  }
</style>